<template>
  <div class="main-content1">
    <div class="header-content" @click="clickToAddressPage">
      <div class="contentBox">
        <div v-if="address.address_name" class="contentBoxLeft">
          <svg-icon icon-class="user_address" />
        </div>
        <div v-if="address.address_name" class="contentBoxCenter">
          <p class="top">
            <span>{{ address.address_name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ address.address_mobile }}</span>
          </p>
          <p class="bottom">
            <span style="overflow-x: hidden;text-overflow: ellipsis">收货地址：{{ address.address_address }}</span>
          </p>
        </div>
        <div v-else class="contentBoxCenter">
          <p class="noAddress">请选择地址</p>
        </div>
        <div class="contentBoxRight">
          <svg-icon icon-class="icon_right" />
        </div>
      </div>
      <div class="hr"/>
    </div>
    <div class="main-content">
      <div v-if="goodsList" class="main-listItem">
        <tpl-goods-slide ref="goodsListBox" :item-list="goodsList.item_list" :is-settlement="isSettlement"/>
      </div>
      <div class="total">
        <p class="top">
          <span class="icon"><svg-icon icon-class="totalNum" />&nbsp;&nbsp;商品总数</span>
          <span class="fee">{{ postData.total_num }} 件</span>
        </p>
        <p class="top">
          <span v-if="postData.invoice_type !== 0" class="icon"><svg-icon icon-class="totalP" />&nbsp;&nbsp;商品总价(含税)</span>
          <span v-else class="icon"><svg-icon icon-class="totalP" />&nbsp;&nbsp;商品总价</span>
          <span class="fee">¥ {{ (Number(postData.total_price) * (1 + invoiceNum/100)).toFixed(getitem.item_price_p) }}</span>
        </p>
      </div>
      <div class="postFee">
        <p class="top" @click="setPostFee">
          <span class="icon"><svg-icon icon-class="postage" />&nbsp;&nbsp;运费</span>
          <span class="fee">¥ {{ parseFloat(postData.post_fee).toFixed(getitem.item_price_p) }}</span>
        </p>
      </div>
      <!--<div class="invoiceFee" v-if="postData.invoice_type !== 0">-->
        <!--<p class="top" @click="setPostFee">-->
          <!--<span class="icon"><svg-icon icon-class="postage" />&nbsp;&nbsp;发票金额</span>-->
          <!--<span class="fee">¥ {{(parseFloat(postData.total_price)*parseFloat(invoiceNum)/100).toFixed(getitem.item_price_p) }}</span>-->
        <!--</p>-->
      <!--</div>-->
      <div class="invoice" v-if="isOpenPostagePlug">
        <div class="content">
          <div class="form_item1" @click="deliverTypeShow = true">
            <span><svg-icon icon-class="postage" /></span><span>&nbsp;&nbsp;配送方式</span>
            <span class="right_box">{{deliverType}}</span>
            <van-actionsheet
                    v-model="deliverTypeShow"
                    :actions="deliverTypeData"
                    @select="onSelectDeliverType"></van-actionsheet>
          </div>
        </div>
      </div>
      <div class="invoice" v-if="getorder.open_deliver_time == 1">
        <div class="content">
          <div class="form_item1" @click="deliverTimeShow = true">
            <span><svg-icon icon-class="postage" /></span><span>&nbsp;&nbsp;交货时间</span>
            <span class="right_box">{{postData.deliver_time?postData.deliver_time:'无'}}</span>
          </div>
          <van-popup v-model="deliverTimeShow" :close-on-click-overlay="true" position="bottom">
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :formatter="formatter"
                    :min-date="new Date()"
                    @confirm="onSelectDeliverTime"
                    @cancel="deliverTimeShow = false"></van-datetime-picker>
          </van-popup>
        </div>
      </div>
      <div class="invoice" v-if="isOpenInvoice">
        <div class="content">
          <div class="form_item1" @click="invoiceTypeShow = true">
            <span><svg-icon icon-class="fapiao_1" /></span><span>&nbsp;&nbsp;发票类型</span>
            <span class="right_box">{{invoiceType}}</span>
            <van-actionsheet
              v-model="invoiceTypeShow"
              :actions="invoiceData"
              @select="onSelectInvoiceType"></van-actionsheet>
          </div>
          <div class="form_item2" v-if="postData.invoice_type !== 0">
            <van-cell-group>
              <van-field
                v-model="postData.invoice_title"
                required
                clearable
                label="发票抬头"
                icon="question-o"
                placeholder="请输入发票抬头"></van-field>
              <van-field
                v-model="postData.invoice_code"
                required
                clearable
                label="纳税人识别码"
                icon="question-o"
                placeholder="请输入纳税人识别码"></van-field>
              <van-field
                v-model="postData.invoice_info"
                :required="postData.invoice_type === 2"
                clearable
                :disabled="true"
                label="发票内容"
                icon="question-o"
                placeholder="请输入发票内容"></van-field>
              <span v-if="postData.invoice_type == 2">
                <van-field
                  v-model="postData.invoice_address"
                  :required="postData.invoice_type === 2"
                  clearable
                  label="地址"
                  icon="question-o"
                  placeholder="请输入地址"></van-field>
                <van-field
                  v-model="postData.invoice_phone"
                  :required="postData.invoice_type === 2"
                  clearable
                  label="电话"
                  icon="question-o"
                  placeholder="请输入电话"></van-field>
                <van-field
                  v-model="postData.bank_account_name"
                  :required="postData.invoice_type === 2"
                  clearable
                  label="开户名称"
                  icon="question-o"
                  placeholder="请输入开户名称"></van-field>
                <van-field
                  v-model="postData.bank_name"
                  :required="postData.invoice_type === 2"
                  clearable
                  label="开户银行"
                  icon="question-o"
                  placeholder="请输入开户银行"></van-field>
                <van-field
                  v-model="postData.bank_code"
                  :required="postData.invoice_type === 2"
                  clearable
                  label="开户银行"
                  icon="question-o"
                  placeholder="请输入开户银行"></van-field>
              </span>
            </van-cell-group>
          </div>
        </div>
      </div>
      <div class="remark">
        <span class="icon"><svg-icon icon-class="edit2" /></span>
        <van-field style="border-bottom: 1px solid #eee;border-top: 0" v-model="postData.order_remark" type="textarea" placeholder="可以告诉卖家你的特殊要求" rows="1" autosize/>
      </div>
    </div>
    <div class="totalInfo">
      <span class="left">
        <span v-if="postData.invoice_type !== 0">应付总额(含税):</span>
        <span v-else>应付总额:</span>
        <span class="font-colorRed price">¥{{(allTotalPrice() * (1 + invoiceNum/100)).toFixed(getitem.item_price_p) }}</span>
      </span>
      <span class="right" @click="clickToPostOrder">
        <van-loading v-if="isPostOrder" color="white"/>
        <span v-if="!isPostOrder">提交订单</span>
      </span>
    </div>
    <!--地址弹窗-->
    <!--<address-dialog ref="addressDialog" :show="isShowAddress" @getAddressFromDialog="getAddressFromDialog" />-->
    <!--编辑发票信息-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import tplGoodsSlide from '../../order/components/tplGoodsSlide'
import { getItemInfo } from '@/api/goods'
import { GetUserAddressList } from '@/api/customer'
import { addGoodsOrder, getPostageFee, getInvoiceData, getPostModle } from '@/api/order'
import addressDialog from '../components/addressDialog'
import axios from 'axios'
import { getUserInfo } from '@/api/login'

export default {
  name: 'Index',
  components: {
    addressDialog,
    tplGoodsSlide
  },
  data() {
    return {
      currentDate: new Date(),
      isSettlement: true,
      isPostOrder: false,
      mapJson: '../../static/json/map.json',
      address: {},
      goodsList: [],
      postFee: 0,
      isShowAddress: false,
      havePostFee: true,
      postFeeRule: undefined,
      postData: {
        total_price: 0,
        total_num: 0,
        item_ids: [], // 下单的商品id数组
        sku_ids: [], // 下单的商品sku_id数组,没有时可填写0或空
        nums: [], // 下单的商品数量数组
        remarks: '', // 每个下单商品的备注数组
        post_fee: 0.00, // 运费
        user_address_id: undefined, // 客户的地址id
        order_remark: '', // 订单备注
        file: [], // 附件
        wfx_order_id: 0, // 微分销订单id
        address_name: '', // 收货人姓名
        address_mobile: '', // 收货人电话
        address_address: '', // 收货地址详情
        wfx_order_sn: '', // 微分销的订单编号
        invoice_type: 0,
        invoice_title: '',
        invoice_code: '',
        invoice_info: '商品',
        invoice_address: '',
        invoice_phone: '',
        bank_account_name: '',
        bank_name: '',
        bank_code: ''
      },
      invoiceTypeShow: false,
      isOpenInvoice: false,
      invoiceType: '不开发票',
      invoiceData: [],
      editInvoicePopup: false,
      invoiceNum: 0, // 发票税率

      isOpenPostagePlug: false,
      deliverTypeShow: false,
      deliverType: 3,
      deliverTypeData: [],
      deliverTimeShow: false
    }
  },
  computed: {
    ...mapGetters([
      'getitem',
      'getorder'
    ])
  },
  mounted() {
    this.getUserInfoFn()
    this.$toast.loading({
      mask: true,
      message: '加载中...'
    })
    this.setAddress()
    this.getInvoiceTypeList()
    this.getDeliverTypeData()
  },
  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 获取发票插件信息
    getInvoiceTypeList() {
      getInvoiceData().then(res => {
        const data = res.data
        console.log('获取发票插件信息=', data)
        if (data.status_code === 200) {
          // eslint-disable-next-line
          if (data.data.shop_status == 1) {
            this.isOpenInvoice = true
            console.log('插件开启', data)
            this.invoiceData.push({ value: 0, name: '不开发票', i: 0 })
            // eslint-disable-next-line
            if (data.data.inv_open_general == 1) {
              let rate = 0
              // eslint-disable-next-line
              if (data.data.inv_open_rate == 1) {
                rate = data.data.inv_general_rate
              }
              this.invoiceData.push({ value: 1, name: '普通增值税发票(' + rate + '%)', i: rate })
            }
            // eslint-disable-next-line
            if (data.data.inv_open_special == 1) {
              let rate = 0
              // eslint-disable-next-line
              if (data.data.inv_open_rate == 1) {
                rate = data.data.inv_special_rate
              }
              this.invoiceData.push({ value: 2, name: '专用增值税发票(' + rate + '%)', i: rate })
            }
          } else {
            this.isOpenInvoice = false
          }
        } else {
          this.isOpenInvoice = false
        }
      })
    },
    // 获取用户信息
    getUserInfoFn() {
      getUserInfo().then(res => {
        const data = res.data
        if (data.status_code === 200) {
          console.log(data.data)
          this.postData.invoice_title = data.data.invoice_title
          this.postData.invoice_code = data.data.invoice_code
          this.postData.invoice_address = data.data.invoice_address
          this.postData.invoice_info = '商品明细'
          this.postData.invoice_phone = data.data.invoice_phone
          this.postData.bank_account_name = data.data.bank_account_name
          this.postData.bank_code = data.data.bank_code
          this.postData.bank_name = data.data.bank_name
        }
      })
    },
    // 获取配送方式
    getDeliverTypeData(user_id) {
      const data = {
        user_id: user_id
      }
      getPostModle(data).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.isOpenPostagePlug = true // 开启运费插件
          console.log('请求获取配送方式=', data)
          // -------每次切换客户清空状态------------
          if (data.data.express_status === 1) {
            this.deliverTypeData.push({ value: 3, name: '快递' })
          }
          if (data.data.take_status === 1) {
            this.deliverTypeData.push({ value: 1, name: '上门自取' })
          }
          if (data.data.delivery_status === 1) {
            this.deliverTypeData.push({ value: 2, name: '送货上门' })
          }
          // ---------------------------
          // 默认选中显示的第一项
          if (data.data.express_status === 1) {
            this.deliverType = '快递'
          } else if (data.data.take_status === 1) {
            this.deliverType = '上门自取'
          } else if (data.data.delivery_status === 1) {
            this.deliverType = '送货上门'
          }
          this.storehouse_id = data.data.storehouse_id
          this.postData.deliver_type = this.deliverType
          // 修改运费
          if (this.postData.deliver_type === 3) {
            this.getPostFee(this.postData.user_address_id)
          } else {
            this.postData.post_fee = 0
          }
        } else {
          console.log('没有开启运费插件')
        }
      })
    },
    // 选择配送方式
    onSelectDeliverType(item) {
      console.log('选择配送方式=', item)
      this.deliverTypeShow = false
      this.deliverType = item.value
      this.postData.deliver_type = item.value
      // 修改运费
      if (this.postData.deliver_type === 3) {
        this.getPostFee(this.postData.user_address_id)
      } else {
        this.postData.post_fee = 0
      }
    },
    // 选择交货时间
    onSelectDeliverTime(item) {
      // 年
      const year = item.getFullYear()
      // 月
      const month = item.getMonth() + 1 < 10 ? ('0' + (item.getMonth() + 1)) : item.getMonth() + 1
      // 日
      const day = item.getDate() < 10 ? ('0' + item.getDate()) : item.getDate()

      const deliverTime = year + '-' + month + '-' + day
      console.log('选择交货时间=', deliverTime)
      this.postData.deliver_time = deliverTime
      this.deliverTimeShow = false
    },
    // 选择发票类型
    onSelectInvoiceType(item) {
      console.log('选择发票类型=', item)
      this.invoiceTypeShow = false
      this.postData.invoice_type = item.value
      this.invoiceType = item.name
      this.invoiceNum = item.i
      this.$refs.goodsListBox.invoice = item
    },
    // 编辑发票信息
    editInvoiceData() {
      this.editInvoicePopup = true
    },
    // 确认修改发票信息
    confirmEditInvoiceData() {
      this.editInvoicePopup = false
    },
    // 显示客户地址
    setAddress() {
      if (this.$store.state.address) {
        let address = {}
        address = this.$store.state.address
        console.log('address=', address)
        this.postData.user_address_id = address.user_address_id
        this.formattingAddress(address)
      } else {
        this.getUserAddressList()
      }
    },
    // 从数据库获取客户地址
    getUserAddressList() {
      GetUserAddressList().then(res => {
        const data = res.data
        if (data.status_code === 200) {
          let flag = false
          data.list.forEach(item => {
            if (item.is_default === 1) { // 显示默认地址
              flag = true
              this.postData.user_address_id = item.user_address_id
              this.formattingAddress(item) // 格式化地址省市区
            }
          })
          if (!flag) { // 没有默认显示第一个地址
            this.postData.user_address_id = data.list[0].user_address_id
            this.formattingAddress(data.list[0])// 格式化地址省市区
          }
        } else {
          console.log('没有地址')
        }
        this.getItemInfoFn()
      })
    },
    // 转化省市区编码
    formattingAddress(address) {
      axios.get(this.mapJson).then((res) => {
        console.log('mapJson=', res)
        if (res.status === 200) {
          const data = res.data
          address.pro = data[address.address_province_id]
          address.city = data[address.address_city_id]
          address.arae = data[address.address_area_id]
          this.address = address
          this.getItemInfoFn()
        }
      })
    },
    // 点击修改地址
    clickToAddressPage() {
      this.$store.state.settlementData = JSON.parse(this.$route.query.itemData)
      this.$router.push({ name: 'user-address', query: {
        type: 1
      }})
    },
    // 获取结算商品信息
    getItemInfoFn() {
      let formData = {}
      if (this.$route.query.itemData) {
        formData = JSON.parse(this.$route.query.itemData)
      } else {
        formData = this.$store.state.settlementData
      }
      getItemInfo(formData).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.goodsList = data.data
          this.postData.total_price = this.goodsList.total_price
          this.postData.total_num = this.goodsList.total_num
          this.getPostFee(this.postData.user_address_id)
        } else {
          this.$toast.fail({
            duration: 1500,
            message: data.message
          })
          setTimeout(() => {
            this.$router.push({ name: 'shop-car' })
          }, 1500)
        }
      })
    },
    // 获取运费计算规则
    getPostFee(user_address_id) {
      getPostageFee(user_address_id).then(res => {
        const data = res.data
        this.isOpenPostagePlug = false
        if (data.status_code === 200) {
          this.isOpenPostagePlug = true
          this.postFeeRule = data.data
        } else {
          this.isOpenPostagePlug = false
        }
        this.chargePostFee(this.postFeeRule, this.isOpenPostagePlug)// 计算运费
      })
    },
    // 计算运费1
    chargePostFee(postFeeRule, isOpenPostagePlug) {
      if (isOpenPostagePlug) { // 开启插件
        if (postFeeRule.post_is_free === '1') { // 开启免邮
          if (parseFloat(this.goodsList.total_price) >= parseFloat(postFeeRule.post_free_order_price)) { // 总金额大于免邮金额(免邮费)
            this.postData.post_fee = 0
          } else { // 总金额大于免邮金额
            this.checkPostFeeNum(postFeeRule)
          }
        } else { // 没有开启免邮
          this.checkPostFeeNum(postFeeRule)
        }
      } else { // 没有开启插件
        this.postData.post_fee = 0
      }
    },
    // 计算运费2
    checkPostFeeNum(postData) {
      let totalNum = 0
      let totalWeight = 0
      // 获取商品总数和总重
      this.goodsList.item_list.forEach(item => {
        if (item.num) {
          totalNum = totalNum + Number(item.num)
        }
        if (item.weight) {
          totalWeight = totalWeight + (Number(item.num) * Number(item.weight))
        }
      })
      // 计算运费
      if (postData.post_postfee_type === '1') { // 按数量算运费
        if (totalNum > parseFloat(postData.postage_rule.base_num)) {
          this.postData.post_fee = parseFloat(postData.postage_rule.base_price) + Math.ceil((totalNum - parseFloat(postData.postage_rule.base_num)) / parseFloat(postData.postage_rule.continued_num)) * parseFloat(postData.postage_rule.continued_price)
        } else if (totalNum <= parseFloat(postData.postage_rule.base_num) && totalNum > 0) {
          this.postData.post_fee = parseFloat(postData.postage_rule.base_price)
        } else {
          this.postData.post_fee = 0
        }
      } else { // 按重量算运费
        if (totalWeight > parseFloat(postData.postage_rule.base_num)) {
          this.postData.post_fee = parseFloat(postData.postage_rule.base_price) + Math.ceil((totalWeight - parseFloat(postData.postage_rule.base_num)) / parseFloat(postData.postage_rule.continued_num)) * parseFloat(postData.postage_rule.continued_price)
        } else if (totalWeight <= parseFloat(postData.postage_rule.base_num) && totalWeight > 0) {
          this.postData.post_fee = parseFloat(postData.postage_rule.base_price)
        } else {
          this.postData.post_fee = parseFloat(postData.postage_rule.base_price)
        }
      }
      this.$toast.clear()
    },

    // 设置运费
    setPostFee() {
      this.havePostFee = !this.havePostFee
    },
    // 计算总价(订单价格+运费)
    allTotalPrice() {
      const postFee = this.postData.post_fee // 运费计算
      return parseFloat(this.goodsList.total_price) + parseFloat(postFee)
    },
    // 点击下单
    clickToPostOrder() {
      this.isPostOrder = true
      if (this.deliverType === '快递') {
        this.postData.deliver_type = 3
      } else if (this.deliverType === '上门自提') {
        this.postData.deliver_type = 1
      } else {
        this.postData.deliver_type = 2
      }
      const postData = {
        item_ids: JSON.parse(this.$route.query.itemData).item_ids, // 下单的商品id数组
        sku_ids: JSON.parse(this.$route.query.itemData).sku_ids, // 下单的商品sku_id数组,没有时可填写0或空
        nums: JSON.parse(this.$route.query.itemData).nums, // 下单的商品数量数组
        remarks: this.postData.remarks, // 每个下单商品的备注数组
        post_fee: this.postData.post_fee, // 运费
        user_address_id: this.address.user_address_id, // 客户的地址id
        address_name: this.address.address_name, // 收货人姓名
        address_mobile: this.address.address_mobile, // 收货人电话
        address_address: this.address.address_address, // 收货地址详情
        order_remark: this.postData.order_remark, // 订单备注
        wfx_order_id: '', // 微分销订单id
        wfx_order_sn: '', // 微分销的订单编号
        invoice_title: this.postData.invoice_title, // 发票抬头
        invoice_code: this.postData.invoice_code, // 纳税人识别码
        invoice_address: this.postData.invoice_address, // 发票地址
        invoice_phone: this.postData.invoice_phone, // 发票电话
        invoice_type: this.postData.invoice_type, // 发票类型
        invoice_info: this.postData.invoice_info, // 发票内容
        bank_code: this.postData.bank_code, // 订单银行账号
        bank_account_name: this.postData.bank_account_name, // 开户名
        bank_name: this.postData.bank_name, // 开户银行
        deliver_type: this.postData.deliver_type, // 配送方式
        deliver_time: this.postData.deliver_time // 交货时间
      }
      console.log('点击下单=', postData)
      addGoodsOrder(postData).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.$router.push({ name: 'add-order-success', query: {
            id: data.order_id
          }})
        } else {
          this.$toast.fail(data.message)
        }
        this.isPostOrder = false
      })
    }
  }
}
</script>

<style lang="scss">
  @import "src/styles/mixin.scss";
  .van-cell{
    padding: pxCalc(20px)!important;
  }
  .van-collapse-item__content{
    padding: 0!important;
  }
  .van-field__body{
    height: 100%;
  }
</style>
<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .main-content1{
    background-color: #fff;
  }
  .header-content{
    width: 100%;
    height: pxCalc(100px);
    background-color: #fff;
    .contentBox{
      height: 100%;
      padding: pxCalc(20px) pxCalc(20px);
      display: flex;
      flex-direction: row;
      .contentBoxLeft{
        line-height: pxCalc(75px);
      }
      .contentBoxRight{
        line-height: pxCalc(75px);
      }
      .contentBoxCenter{
        height: 100%;
        width: 100%;
        padding: 0 pxCalc(10px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top{
          height: 50%;
          font-weight: bold;
          font-size: pxCalc(14px);
          /*height: pxCalc(30px);*/
          overflow: hidden;
          text-overflow: ellipsis;
          @include lineClamp($font-size:pxCalc(14px),$line-height:1.6 ,$lines-to-show:2)
        }
        .bottom{
          height: 50%;
          /*height: pxCalc(30px);*/
          overflow: hidden;
          text-overflow: ellipsis;
          @include lineClamp($font-size:pxCalc(14px),$line-height:1.6 ,$lines-to-show:2)
        }
        .noAddress{
          text-align: center;
          line-height: pxCalc(50px);
          height: 50%;
        }
      }
    }
    .hr{
      width: 100%;
      height: pxCalc(5px);
      background: url("../../../assets/images/shopCar/settleHeader.png");
      background-size: auto 100%;
    }
  }
  .main-content{
    margin-top: pxCalc(10px);
    padding-bottom: pxCalc(65px);
    .main-listItem{
      margin-bottom: pxCalc(10px);
      background-color: #fff;
      padding-left: pxCalc(20px);
      .titleContent{
        width: 100%;
        height: pxCalc(70px);
        display: flex;
        img {
          width: pxCalc(70px);
          height: pxCalc(70px);
        }
        .title{
          padding-left: pxCalc(10px);
          .words{
            margin-bottom: pxCalc(5px);
            height: 3em;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .tag{
            color: #ff0000;
            border: 1px solid #ff0000;
            font-size: pxCalc(10px);
            border-radius: pxCalc(10px);
            padding: 0 pxCalc(5px);
          }
        }
      }
      .skuContent{
        width: 100%;
        max-height: pxCalc(210px);
        background-color: #fbfbfb;
        padding: 0 pxCalc(20px);
        overflow-y: scroll;
        .sku-item{
          width: 100%;
          height: pxCalc(70px);
          padding: pxCalc(15px);
          border-bottom: 1px solid #eee;
          display: flex;
          flex-direction: row;
          color: #6c6c6c;
          .item-left{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          .item-right{
            text-align: right;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .price{
              color: #000;
            }
          }
        }
      }
      .skuContent::-webkit-scrollbar{
        display: none;
      }
    }
    .total{
      width: 100%;
      height: pxCalc(100px);
      display: flex;
      flex-direction: column;
      background-color: #fff;
      padding: 0 pxCalc(20px);
      .top  {
        line-height: pxCalc(50px);
        height: 50%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: pxCalc(14px);
        .fee{
          color: #ff0000;
          font-weight: bold;
        }
      }
    }
    .postFee{
      width: 100%;
      height: pxCalc(50px);
      display: flex;
      flex-direction: column;
      background-color: #fff;
      padding: 0 pxCalc(20px);
      .top  {
        line-height: pxCalc(50px);
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: pxCalc(14px);
        position: relative;
        .fee{
          color: #ff0000;
          font-weight: bold;
        }
        .input{
          height: 50%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: pxCalc(100px);
          border: 1px solid #eee;
          text-align: right;
        }
      }
    }
    .invoiceFee{
      width: 100%;
      height: pxCalc(50px);
      display: flex;
      flex-direction: column;
      background-color: #fff;
      padding: 0 pxCalc(20px);
      .top  {
        line-height: pxCalc(50px);
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: pxCalc(14px);
        position: relative;
        .fee{
          color: #ff0000;
          font-weight: bold;
        }
        .input{
          height: 50%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: pxCalc(100px);
          border: 1px solid #eee;
          text-align: right;
        }
      }
    }
    .invoice{
      width: 100%;
      padding-left: pxCalc(20px);
      .content{
        /*border-top: 1px solid #eee;*/
        /*border-bottom: 1px solid #eee;*/
        padding-right: pxCalc(20px);
      }
      .form_item1{
        width: 100%;
        height: pxCalc(50px);
        line-height: pxCalc(50px);
        font-size: pxCalc(14px);
        .right_box{
          float: right;
        }
      }
      .form_item2{
        width: 100%;
        line-height: 3em;
        padding: 0 pxCalc(10px);
        position: relative;
      }
    }
    .remark::-webkit-scrollbar{
      display: none;
    }
    .remark{
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      background-color: #fff;
      .icon{
        font-size: pxCalc(14px);
        padding: 0 0 0 pxCalc(20px);
        line-height: pxCalc(60px);
      }
      .bottom{
        height: 100%;
        width: 100%;
        .orderRemark{
          display: inline-block;
          height: 100%;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .totalInfo{
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: pxCalc(10px) pxCalc(20px);
    height: pxCalc(55px);
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    .left{
      width: 100%;
      line-height: pxCalc(35px);
      .price{
        font-size: pxCalc(16px);
        font-weight: bold;
        margin-left: pxCalc(5px);
      }
    }
    .right{
      height: 100%;
      width: pxCalc(150px);
      background: -webkit-linear-gradient(left,#ff4c38 0,#ff7f50 100%);
      border-radius: pxCalc(50px);
      line-height: pxCalc(35px);
      text-align: center;
      position: relative;
      color: #fff;
      .van-loading{
        width: pxCalc(20px);
        height: pxCalc(20px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
      }
    }
  }
  .editRemarkBox{
    padding: pxCalc(20px);
    width: pxCalc(300px);
    height: pxCalc(200px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title{
      width: 100%;
      font-weight: bold;
    }
    .content{
      flex: 1;
      width: 100%;
      height: 100%;
    }
    .footerBtn{
      display: flex;
      justify-content: space-around;
    }
  }
  .editInvoiceData{
    padding: pxCalc(20px);
    height: 90%;
    .title{
      width: 100%;
      height: pxCalc(50px);
      line-height: pxCalc(50px);
      font-size: pxCalc(16px);
      text-align: center;
    }
    .btnGroup{
      margin-top: pxCalc(50px);
      margin-bottom: pxCalc(50px);
      width: 100%;
      text-align: center;
    }
  }
</style>

